import React from 'react'
import './index.less'

export default props => {
  const { progVideoUrl: videoUrl, progVideoImg: videoImg } = props
  return (
    <div className="prog-desc-pad">
      <div className="desc-left">
        <h2>掌握逻辑，成就创造力</h2>
        <p>Scratch 编程语言由MIT 媒体实验室开发，至今已有上亿儿童学习。美国超过50%的小学生学习Scratch。</p>
        <p>学习编程帮助孩子们建立并拓展逻辑思维，探索解决问题的策略，了解项目设计，理解分享、控制与沟通。</p>
      </div>
      <div className="desc-video">
        <div className="cover-img"
          style={{ display: `${videoUrl ? 'none' : 'block'}` }}
          onClick={() => { props.getDescVideoUrl() }}><img style={{ cursor: 'pointer' }} src={videoImg} />
        </div>
        <video style={{ display: `${videoUrl ? 'inline-block' : 'none'}`, width: 556, height: 310 }} src={videoUrl} controls autoPlay={true} />
      </div>
    </div>
  )
}
